<template>
	<view>
		<view class="main">
			<view style="display: flex;flex-direction: row;">
				<view style="color: #FB9E00;height: 40px;width: 5px; background: #F99B15; "></view>
				<view style="margin-left: 10px;font-size: 20px;
				justify-content: center;align-items: center;display: flex;">
					用户信息</view>
			</view>

			<view class="userInfo1">
				<image style="   border-radius: 50px;   width: 50px;height: 50px;"
					src="../../../static/userimage.png"></image>
				<view class="userInfo2">
					<view class="userInfo_item">登录账号：{{getUsername()}}</view>
					<view class="userInfo_item">手机号码：{{getUserPhone()}}</view>
					<view class="userInfo_item">用户类型：{{isHy()}}</view>
				</view>

			</view>

			<view class="item">
				<text>微信号码</text><input maxlength="20"  class="inputView" placeholder="请输入微信号码"
					v-model="wx" />
			</view>
			<view class="item">
				<text>QQ号码</text><input v-model="qq" maxlength="20"  class="inputView"
					placeholder="请输入QQ号码" />
			</view>
			<view style="width: 100%;display: flex;justify-content: center;">
				<view class="btn" @click="updateUser()">修改信息</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		
		mounted() {
			this.wx=this.$PublicData.getUserdata().wx;
			this.qq=this.$PublicData.getUserdata().qq;
			
		},
		data() {
			return {
				wx: "",
				qq: "",
			}
		},
		methods: {
			isHy() {
				if (this.$PublicData.getUserdata().ishy == 1) {
					return "会员"
				} else {
					return "普通用户"
				}
			},
			getUsername() {
				return this.$PublicData.getUserdata().userName;
			},
			getUserPhone() {
				return this.$PublicData.getUserdata().phone;
			},
			async updateUser(){
				try {
					const res = await this.$postData({
						url: this.$apis.updateUserInfo,
						data: {
							wx: this.wx,
							qq: this.qq,
							USER_ID: this.$PublicData.getUserdata().uid,
						}
					})
					
				this.$PublicData.saveUserwxQQ(this.wx,this.qq);
					uni.showToast({
						title: "修改成功",
						
					})
				
				} catch (e) {
					console.log("eee: ", e);
				}
				
			}
		}
	}
</script>

<style>
	.main {
		padding: 30px;
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;

	}

	.userInfo1 {
		justify-content: center;
		align-items: center;
		padding: 20px;
		display: flex;
		flex-direction: row;
	}

	.userInfo2 {
		display: flex;
		flex-direction: column;
		margin-left: 20px;
	}

	.userInfo_item {
		display: flex;
		min-height: 25px;
	}

	.item {
		margin-left: 50px;
		margin-right: 50px;
		margin-top: 10px;
		align-items: center;
		display: flex;
		min-height: 45px;
	}

	.inputView {
		padding-left: 10px;
		margin-left: 30px;
		height: 40px;
		width: 600px;
		border: 1px solid #E5E5E5;
	}

	.btn {
		letter-spacing: 0.2rem;
		margin-top: 50px;
		font-size: 1rem;
		width: 18.875rem;
		border: 0.0625rem solid #F99B15;
		border-radius: 0.3125rem;
		text-align: center;
		justify-content: center;
		align-items: center;
		display: flex;
		height: 40px;
		background: #F99B15;
		color: #FFFFFF;
	}
</style>
